<template>
  <!-- 
  三个搜索
  1.传递搜索（first）参数至searchpage.vue
  2.热词生成、热词搜索结果当前页面展示
  3.历史显示（localStorage）、历史搜索结果当前页面展示
  两个封装方法调用
  4.历史记录存储服务器，历史记录显示localStorage[10]
  -->
  <div>
    <img
      src="./image/main.png"
      alt="图片说明文字"
      title="“elasticsearch搜索引擎”"
      style="font-famlily:cursive"
    />
    <el-row>
      <el-col :span="12" :push="5">
        <div>
          <el-input v-model="search" @change="passSearch(search)" placeholder="搜索邮件，默认全文检索">
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </el-col>
      <el-col :span="1" :push="5">
        <div>
          <el-button type="primary">搜索一下</el-button>
        </div>
      </el-col>
    </el-row>

    <div style="margin-top:5px">
      <el-row>
        <el-button plain size="mini">搜索范围</el-button>
        <el-button plain size="mini">全部</el-button>
        <el-button type="success" plain size="mini">主题</el-button>
        <el-button type="info" plain size="mini">正文</el-button>
        <el-button type="warning" plain size="mini">发件人</el-button>
        <el-button type="warning" plain size="mini">发件日期</el-button>
        <el-button type="warning" plain size="mini">收件人</el-button>
        <el-button type="danger" plain size="mini">发件人邮箱</el-button>
        <el-button type="danger" plain size="mini">收件人邮箱</el-button>
        <el-button type="danger" plain size="mini">...</el-button>
      </el-row>
    </div>

    <div class="w650" style="padding-top: 10px">
      <ul>
        <li>
          <font color="red">热门搜索：</font>
        </li>
        <li>
          <a href="/search?q=java视频教程" role="button">java视频教程</a>
        </li>
        <li>
          <a href="/search?q=SpringBoot" role="button">SpringBoot</a>
        </li>
        <li>
          <a href="/search?q=SpringCloud" role="button">SpringCloud</a>
        </li>
        <li>
          <a href="/search?q=动力节点" role="button">动力节点</a>
        </li>
        <li>
          <a href="/search?q=Mybatis" role="button">Mybatis</a>
        </li>
        <li>
          <a href="/search?q=SSM" role="button">SSM</a>
        </li>
        <li>
          <a href="/search?q=redis" role="button">redis</a>
        </li>
        <li>
          <a href="/search?q=Spark" role="button">Spark</a>
        </li>
        <li>
          <a href="/search?q=vue" role="button">vue</a>
        </li>
        <li>
          <a href="/search?q=elasticsearch" role="button">elasticsearch</a>
        </li>
        <li>
          <a href="/search?q=shiro" role="button">shiro</a>
        </li>
      </ul>
      <ul
        v-for="(item,index) in likelySet"
        :key="index"
        @click="passSearch(item)"
        style="float:left;margin:1px"
      >
        <li style="color:#00F">{{item}}</li>
      </ul>
    </div>
    <!---历史记录begin---->
    <div
      style="margin-top:46px;margin-left:25%;border-radius:8px;border:2px solid;width:50%;height:200px"
      v-if="this.configHisShow=='true'"
    >
      <div style="float: left">
        <p style="color:rgb(0,0,255)">搜索历史:</p>
      </div>
      <div v-if="this.showFlag === true" class="search-history">
        <div
          v-for="(item,index) in searchHistoryList"
          :key="index"
          @click="passSearch(item)"
          style="float:left;margin:10px"
        >搜索历史{{index+1}}:{{item}}</div>
      </div>
      <div style="float: right" @click="clearHistoryItems">
        <img src="./image/delete-1.png" width="30px" title="清空搜索历史" />
      </div>
    </div>
    <!---历史记录end---->
  </div>
</template>

 <script>
import axios from "axios";
import "./javascript/StringUtil.js";
import "./javascript/PromiseUtil.js";
import { configHisShow } from "./config/config";
export default {
  data() {
    return {
      search: "",
      emlIndexList: [],
      currentDate: new Date(),
      object: {
        first_name: "Ray",
        last_name: "Liang"
      },
      //
      configHisShow: configHisShow[0],
      showFlag: true,
      searchHistoryList: [
        "中国力量",
        "Java开发",
        "美国明星",
        "郑爽",
        "xxxxxxxxxxxxxxxx"
      ],
      likelySet: []
    };
  },
  computed: {
    //进入的用户
    userSO_json() {
      let userSO_json = JSON.parse(sessionStorage.getItem("userSO_json"));
      return userSO_json;
    }
  },
  created() {
    console.log(this.configHisShow);
    //1.
    axios
      .get("/api/retrieveLogController/likelySet?userName="+this.userSO_json.userName, {
        headers: {
          //头部信息
          "Content-Type": "application/json;charset=utf-8",
          token: this.userSO_json.token
        }
      })
      .then(response => {
        let resultUtils = response.data;
        console.log("likely如下：");
        console.log(resultUtils.data);
        this.likelySet = resultUtils.data;
      })
      .catch(error => {
        this.$message({
          showClose: true,
          message: "该用户搜索记录过少，故生成的热词比较少",
          type: "warning"
        });
      });
    //2。
    this.searchHistoryList = JSON.parse(localStorage.getItem("historyItems"));
  },

  methods: {
    async passSearch(value) {
      this.PromiseUtil.connhistory(this.search);
      this.StringUtil.appendKeywords(this.searchHistoryList, value);
      this.$router.push({
        path: "/backhome/searcheml/searchpage",
        query: {
          firstSearch: value
        }
      });
    },
    // 清空历史记录
    clearHistoryItems() {
      localStorage.removeItem("historyItems");
      this.searchHistoryList = [];
      this.showFlag = false;
    }
  }
};
</script>
<style scoped>
@import "./css/my.css";
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 50px;
  height: 50px;
  /* width: 100%; */
  display: block;
  float: right;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.CSS5-left {
  float: left;
  border: 1px solid #f00;
}
</style>